/**
 * #info
 *
 *@author   wuwg
 *@createTime   2018/07/20
 *@updateTime   2018/07/20
 *@description  mend-photo  component  修改照片
 */
/**
 * #item
 *
 * @type        aty-mend-photo
 * @cn          修改照片
 * @menu        其他
 * @stPlugin    true
 * @stContainer false
 */
import config from '../../../config/config.js'
// 修改照片的类
import MendPhotoSize from './MendPhotoSize.js'
// prefix
const prefixCls = config.prefix + '-mend-photo'
//  different i ,为了使id产生变化
let diffI = 0
// module
const module = {
  name: prefixCls,
  components: {},
  props: {
    /**
     * #property
     *
     * @name     imgSrc
     * @cn      默认图片的url
     * @type    string
     * @description 默认图片的url,也就是修改头像框中的默认头像
     */
    imgSrc: {
      type: String,
      default: '/static/images/photo.png'
    },
    /**
     * #property
     *
     * @name     width
     * @cn      图片区域的宽
     * @type    number
     * @description 图片区域的宽
     */
    width: {
      type: Number,
      default: 0
    },
    /**
     * #property
     *
     * @name     height
     * @cn      图片区域的高
     * @type    number
     * @description 图片区域的高
     */
    height: {
      type: Number,
      default: 0
    },
    /**
     * #property
     *
     * @name     ratioRate
     * @cn      加减号每次控制的比率值
     * @type    number
     * @value    0.2
     * @description 图片区域右侧加减号，每次点击，增加或者减少的比率值
     */
    ratioRate: {
      type: Number,
      default: 0.2
    },
    /**
     * #property
     *
     * @name     ratioMin
     * @cn      比率最小值
     * @type    number
     * @value    0.2
     * @description 图片缩小的最小比率值
     */
    ratioMin: {
      type: Number,
      default: 0.2
    },
    /**
     * #property
     *
     * @name     ratioMax
     * @cn      比率最大值
     * @type    number
     * @value    5
     * @description 图片放大的最大比率值
     */
    ratioMax: {
      type: Number,
      default: 5
    },
    /**
     * #property
     *
     * @name     throttleTime
     * @cn      节流时间
     * @type    number
     * @value    20
     * @description 节流时间，毫秒
     */
    throttleTime: {
      type: Number,
      default: 20
    },
    /**
     * #property
     *
     * @name     debounceTime
     * @cn      防抖时间
     * @type    number
     * @value    20
     * @description 防抖时间，毫秒
     */
    debounceTime: {
      type: Number,
      default: 10
    }
  },
  data () {
    return {
      mendPhotoSize: null,
      currentImgSrc: this.imgSrc,
      id: 'jsCanvasStage' + diffI, // 必须
      controllerId: 'jsController' + diffI, // 必须
      btnConfirm: 'jsConfirm' + diffI, // 确定按钮
      btnCancel: 'jsCancel' + diffI, // 取消按钮
      fileInput: 'jsFileLoad' + diffI // input：file
    }
  },
  watch: {
    imgSrc (newValue, oldValue) {
      if (newValue != oldValue) {
        this.currentImgSrc = newValue
        if (this.mendPhotoSize) {
          this.mendPhotoSize.img.updateImg(this.currentImgSrc)
        }
      }
    }
  },
  computed: {
    classes () {
      return [
                `${prefixCls}-component`
      ]
    },
    classesTitle () {
      return [
                `${config.prefix}-photo-title`
      ]
    },
    classesContent () {
      return [
                `${config.prefix}-mend-photo-content`
      ]
    },
    classesContentM () {
      return [
                `${config.prefix}-mend-photo-cm`
      ]
    },
    classesContentMIn () {
      return [
                `${config.prefix}-mend-photo-cm-in`
      ]
    },
    classesPhotoImgStage () {
      return [
                `${config.prefix}-photo-img-stage`
      ]
    },
    classesPhotoOperate () {
      return [
                `${config.prefix}-photo-operate`
      ]
    },
    classesPhotoBtnReduce () {
      return [
                `${config.prefix}-photo-btn-reduce`
      ]
    },
    classesPhotoBtnAdd () {
      return [
                `${config.prefix}-photo-btn-add`
      ]
    },
    classesPhotoProgress () {
      return [
                `${config.prefix}-photo-progress`
      ]
    },
    classesPhotoProgressDrag () {
      return [
                `${config.prefix}-photo-progress-drag`
      ]
    },
    classesPhotoFooter () {
      return [
                `${config.prefix}-photo-footer`
      ]
    },
    classesPhotoFooterBtnUpload () {
      return [
                `${config.prefix}-photo-footer-btn-upload`
      ]
    },
    classesPhotoFooterBtnCancel () {
      return [
                `${config.prefix}-photo-footer-btn-cancel`
      ]
    },
    classesPhotoFooterBtnConfirm () {
      return [
                `${config.prefix}-photo-footer-btn-confirm`
      ]
    }
  },
  methods: {

  },
  updated () {

  },
  created () {

  },
  mounted () {
    diffI++

    const _this = this
    // 生成实例
    this.mendPhotoSize = new MendPhotoSize({
      // 页面上的元素
      id: '#' + this.id, // 必须
      width: this.width, // 容器宽  number类型，必须是正值
      height: this.height, // 容器高  number类型，必须是正值
      /** 控制器相关参数**/
      controllerId: '#' + this.controllerId,
      controllerBtnReduce: '.jsBtnReduce', // 缩小按钮
      controllerBtnAdd: '.jsBtnAdd', // 放大按钮
      controllerDragTrack: '.jsDragTrack', // 拖拽按钮
      controllerBtnDrag: '.jsBtnDrag', // 拖拽按钮
      /** 图片相关参数**/
      imgSrc: this.currentImgSrc,
      // 比率
      ratioRate: this.ratioRate, // 增加的比率
      ratioMin: this.ratioMin, // 最小的比率
      ratioMax: this.ratioMax, // 最大比率
      // img 的class
      photoClass: `${config.prefix}-photo-img`,
      // 隐藏图片的class
      photoHideClass: `${config.prefix}-hide`,
      /** 图片蒙版相关参数**/
      imgMaskClass: `${config.prefix}-photo-img-mask`,
      /** 生成图片相关参数**/
      makeImgClass: `${config.prefix}-photo-img-make`,
      /* 其他参数 */
      throttleTime: this.throttleTime, // 节流时间
      debounceTime: this.debounceTime, // 防抖时间
      btnConfirm: '#' + this.btnConfirm, // 确定按钮
      btnCancel: '#' + this.btnCancel, // 取消按钮
      fileInput: '#' + this.fileInput, // input：file
      // 确定按钮回调函数
      confirmCallback: function (data) {
        _this.$emit('confirm', data)
      },
      // 取消按钮回调函数
      cancelCallback: function () {
        _this.$emit('cancel')
      },
      // 上传按钮，文件改变回调函数
      fileChangeCallback: function (data) {
        _this.$emit('change', data)
      }
    })
  }
}
export default module
